<template>
	<div class="layout-padding" style="padding: 0 !important">
		<div class="layout-padding-auto layout-padding-view">
			<div class="main">
				<div class="titlle">
					<div class="s1">创新人才发现</div>
					<div class="d"></div>
					<div class="s2">搜索</div>
					<div class="s3">
						<img class="img" src="/@/assets/icons/sjjq.svg" alt="" sizes="" srcset="" />
						<span class="s3-1">{{ t('home.GlobalPatentDatabase') }}</span>
					</div>
				</div>
				<el-form ref="formRef" :model="form" class="formClass" label-width="auto" style="max-width: 744px">
					<el-row :gutter="20">
						<el-col :span="24" class="mb20">
							<el-form-item label="" prop="industry">
								<div class="input-box">
									<div class="label">{{ t('home.industry') }}</div>
									<el-cascader
										filterable
										class="cascader"
										v-model="form.industry"
										:options="options.industry"
										@change="handleCascader"
										:props="{ checkStrictly: true }"
									/>
								</div>
							</el-form-item>
						</el-col>
						<el-col :span="24" class="mb20">
							<el-form-item label="" prop="agency">
								<div class="input-box-andWrap">
									<div class="input-box">
										<div class="label">{{ t('home.institution') }}</div>
										<!-- <el-select
											@keyup.enter="query"
											class="input"
											v-model="form.agency"
											reserve-keyword
											clearable
											filterable
											:fit-input-width="true"
											remote
											:loading="loading"
											:remote-method="remoteMethod"
											placeholder="输入机构名称（每次输入一个机构的精确名称）"
											size="large"
										>
											<el-option v-for="item in options.agency" :key="item.id" :label="item.agency" :value="item.id" />
										</el-select> -->
										<el-autocomplete
											ref="autocompleteRef"
											class="inline-input"
											value-key="agency"
											v-model="form.agency"
											:fetch-suggestions="querySearch"
											placeholder="输入机构名称（每次输入一个机构的精确名称）"
											:fit-input-width="true"
										></el-autocomplete>
									</div>
									<div class="and">AND</div>
								</div>
							</el-form-item>
						</el-col>
						<el-col :span="24" class="">
							<el-form-item label="" prop="inventor">
								<div class="input-box-andWrap">
									<div class="input-box">
										<div class="label">{{ t('home.name') }}</div>
										<el-input @keyup.enter="query" class="input" v-model="form.inventor" placeholder="输入姓名（每次输入一个人名）" />
									</div>
									<div class="and">AND</div>
								</div>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
				<div class="btn-wrap">
					<el-button class="query-btn" type="primary" size="large" @click="query">{{ t('button.search') }}</el-button>
					<el-button class="query-btn s" size="large" @click="reset">{{ t('button.Reset') }}</el-button>
					<!-- <div class="cz-btn" @click="reset">重置</div> -->
				</div>
				<div class="sm">
					<div class="icon">!</div>
					<p>
						搜索说明： <br />
						1、产业、机构、姓名为“且”（AND)的关系。不同产业，细分领域的层级可能不同。需要选中最末一级细分领域的名称进行搜索。<br />
						2、上述三个条件中，至少输入一个条件，才能进行查询。
					</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { useMessage } from '/@/hooks/message';
import { industryList, getPatentAgencyList } from '/@/api/cx/list';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const router = useRouter();
// 定义变量内容
const form = reactive<any>({
	industry: [], // 产业
	agency: '', // 机构
	inventor: '', // 姓名
});

const options = reactive<any>({
	industry: [],
	agency: [], // 机构
});

const loading = ref(false);

const formRef = ref();

const autocompleteRef = ref();

// 重置
function reset() {
	formRef.value.resetFields();
}

// 查询
function query() {
	let result = false;
	for (const key in form) {
		if (Array.isArray(form[key])) {
			if (form[key].length > 0) {
				result = true;
				break;
			}
		} else {
			if (form[key] !== '') {
				result = true;
				break;
			}
		}
	}
	if (!result) {
		useMessage().error('请至少输入一个条件');
	} else {
		let industry = form.industry.join(',');
		router.push({
			path: '/home/result',
			query: {
				...form,
				industry: industry,
			},
		});
	}
}
// 获取产业下拉
function getIndustryList() {
	industryList().then((res) => {
		if (res.code == 0) {
			options.industry = res.data;
		}
	});
}

// 选中产业节点
function handleCascader(value: any) {
	console.log('handleCascader', value);
}

// 搜索机构
// function remoteMethod(query: string) {
// 	if (query.trim()) {
// 		loading.value = true;
// 		let param = {
// 			name: query,
// 		};
// 		getPatentAgencyList(param)
// 			.then((res) => {
// 				if (res.code == 0) {
// 					options.agency = res.data;
// 				}
// 			})
// 			.finally(() => {
// 				loading.value = false;
// 			});
// 	}
// }
const querySearch = (queryString: string, cb: any) => {
	if (queryString.trim()) {
		loading.value = true;
		let param = {
			name: queryString,
		};
		getPatentAgencyList(param)
			.then((res) => {
				if (res.code == 0) {
					cb(res.data);
				}
			})
			.finally(() => {
				loading.value = false;
			});
	} else {
		cb([]);
	}
};
onMounted(() => {
	getIndustryList();
});
</script>

<style lang="scss" scoped>
.main {
	display: flex;
	align-items: center;
	flex-direction: column;
	padding: 130px 0 0;
	.titlle {
		display: flex;
		align-items: center;
		margin-bottom: 84px;
		position: relative;
		.d {
			width: 8px;
			height: 8px;
			border-radius: 50%;
			background-color: #000000;
			margin: 0 10px;
		}
		.s1 {
			font-weight: 700;
			font-size: 34px;
			color: #000000;
		}
		.s2 {
			font-weight: 700;
			font-size: 34px;
			color: var(--el-color-primary);
		}
		.s3 {
			//width: 108px;
			padding: 0 10px;
			height: 32px;
			background: #e9f1f7;
			border-radius: 6px 6px 6px 6px;
			border: 2px solid #e9f1f7;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 9px;
			position: absolute;
			top: 9px;
			left: 100%;
			white-space: nowrap;
			.img {
				width: 18px;
				height: 14px;
			}
			.s3-1 {
				font-weight: 700;
				font-size: 12px;
				color: var(--el-color-primary);
				margin-left: 2px;
			}
		}
	}
	.sm {
		margin-top: 20px;
		display: flex;
		.icon {
			font-weight: bold;
			font-size: 12px;
			color: #ffffff;
			width: 14px;
			height: 14px;
			background: #c4c7ce;
			border: 6px solid #c4c7ce;
			display: flex;
			//justify-content: center;
			align-items: center;
			border-radius: 50%;
			margin-right: 9px;
			margin-top: 2px;
		}
		p {
			font-weight: 500;
			font-size: 12px;
			color: #000000;
			line-height: 18px;
		}
	}
}
.input-box {
	width: 100%;
	background: #ffffff;
	border-radius: 6px 6px 6px 6px;
	border: 1px solid #c4c7ce;
	display: flex;
	.label {
		font-weight: 700;
		font-size: 14px;
		color: #333333;
		width: 100px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-right: 1px solid #c4c7ce;
	}
	.input {
		flex: 1;
		font-size: 14px;
	}
	:deep(.el-select__wrapper) {
		box-shadow: none;
		min-height: 46px;
		font-size: 14px;
	}
	:deep(.el-input__wrapper) {
		box-shadow: none;
		min-height: 46px;
	}
	:deep(.cascader) {
		flex: 1;
	}
	:deep(.el-cascader .el-input.is-focus .el-input__wrapper) {
		box-shadow: none;
	}
	:deep(.el-cascader:not(.is-disabled):hover .el-input__wrapper) {
		box-shadow: none;
	}
	:deep(.el-autocomplete) {
		flex: 1;
	}
}
.input-box-andWrap {
	display: flex;
	align-items: center;
	width: 100%;
	.input-box {
		flex: 1;
	}
	.and {
		font-weight: 700;
		font-size: 14px;
		color: var(--el-color-primary);
		width: 50px;
		height: 50px;
		background: #e9f1f7;
		border-radius: 6px 6px 6px 6px;
		border: 2px solid #e9f1f7;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 20px;
	}
}
.btn-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	//flex-direction: column;
	margin: 50px 0 70px;
	.query-btn {
		width: 162px;
		height: 44px;
		border-radius: 6px 6px 6px 6px;
		font-size: 18px;
		color: #ffffff;
		&.s {
			color: var(--el-color-primary);
			border-color: var(--el-color-primary);
		}
	}
	.cz-btn {
		font-weight: 400;
		font-size: 14px;
		color: #333333;
		margin-top: 20px;
		cursor: pointer;
		&:hover {
			color: var(--el-color-primary);
		}
	}
}
</style>
